<!DOCTYPE html>
<html>
<head>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
    <div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {
var options = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        yaxis: { min: 0, max: 100 },
        xaxis: { show: false }
    };
    var data = [];
	var t = 0;
    var placeholder = $("#placeholder");
    
    $.plot(placeholder, data, options);
	
	function fetchData() {
   $.ajax({
      url:      '/ajax/myjson',
      method:   'GET',
      dataType: 'json',
      success:  function(json) {
	     
	     data.push([t++,json.value]);
         if(data.length>100){
			data.shift();
		 }
         $.plot($('#placeholder'), [data], options);
      },
	  //error:function(a,b,c) { alert(b); }
   });

   setTimeout(fetchData, 100);
	}
	fetchData();
});
</script>
</body>
</html>